import React, { useEffect } from 'react';
import { Card, TreeSelect, Row, Col, Radio, Spin, Empty } from 'antd';
import { useDepartmentList } from '@/pages/OnboardAndLeave/AdjustPost/Add/components/utils';
import request from '@/utils/request';
// import { getOrganization } from '@/utils/utils';
import PortrayalPie from './components/PortrayalPie';
import PortrayalBar from './components/PortrayalBar';
import styles from './style.less';

const Portrayal = props => {
    const { companyId } = props;
    const [departmentId, setDepartmentId] = React.useState('all');
    const [postType, setPostType] = React.useState();
    const [portrayalDataLoading, setPortrayalDataLoading] = React.useState(false);
    const { loading: departmentLoading, treeData: departmentTreeData } = useDepartmentList({
        companyId
    });
    const [portrayalData, setPortrayalData] = React.useState([]);
    const [barData, setBarData] = React.useState([]);
    // const [organization, setOrganization] = React.useState({});
    const getChartData = async obj => {
        const params = {
            companyId,
            departmentId: null,
            // reportType: null, // 暂时不处理
            ...obj
        };
        setPortrayalDataLoading(true);
        const result = await request('/api/gmstask/v1/hr/overview/getpostrank', { params });
        setPortrayalDataLoading(false);
        if (result.code === 10000) {
            setPortrayalData(result.data);
            if (result.data.length > 0) {
                setPostType(result.data[0].postType);
            }
        }
    };
    const onDepartmentChange = depId => {
        setDepartmentId(depId);
        getChartData({ departmentId: depId === 'all' ? null : depId });
    };
    const onPostTypeChange = e => {
        setPostType(e.target.value);
    };
    const getSummary = () => {
        const result = [];
        if (barData && barData.postRankCount) {
            barData.postRankCount.forEach(item => {
                if (item.name) {
                    result.push(`${item.name}(${item.value})`);
                }
            });
        }
        result.sort((a, b) => parseInt(a.slice(1), 10) - parseInt(b.slice(1), 10));
        return result.join('、');
    };

    useEffect(() => {
        getChartData({ companyId });
    }, [companyId]);

    useEffect(() => {
        if (postType) {
            const targetItem = portrayalData.find(item => item.postType === postType);
            setBarData(targetItem);
        } else {
            setBarData(portrayalData[0]);
        }
    }, [portrayalData, companyId, postType]);

    // 切换公司时，回到默认全部
    // useEffect(() => {
    //     setDepartmentId('all');
    //     const org = getOrganization(Number(companyId));
    //     setOrganization(org);
    // }, [companyId]);

    return (
        <Card
            bordered={false}
            className={styles.card_box}
            title={<span className={styles.card_title}>员工画像</span>}
            extra={
                <Spin spinning={departmentLoading}>
                    <TreeSelect
                        value={departmentId}
                        onChange={onDepartmentChange}
                        treeData={[
                            {
                                id: 'all',
                                parentId: 0,
                                children: [],
                                value: 'all',
                                title: '全部',
                                key: 'all'
                            },
                            ...departmentTreeData
                        ]}
                        className={styles.top_right}
                    />
                </Spin>
            }
        >
            <Spin spinning={portrayalDataLoading}>
                {portrayalData.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                {portrayalData.length > 0 && (
                    <Row gutter={16}>
                        <Col span={6}>
                            <div>
                                <span className={styles.title_dot}></span>
                                <span className={styles.chart_title}>职位类型占比</span>
                            </div>
                            <div className={styles.pie_wrap}>
                                <PortrayalPie data={portrayalData} />
                            </div>
                        </Col>
                        <Col span={18}>
                            <Row type="flex" justify="space-between">
                                <Col>
                                    <span className={styles.title_dot}></span>
                                    <span className={styles.chart_title}>职位职级分布</span>
                                </Col>
                                <Col>
                                    <Radio.Group value={postType} onChange={onPostTypeChange}>
                                        {portrayalData.length > 0 &&
                                            portrayalData.map(item => (
                                                <Radio.Button key={item.postType} value={item.postType}>
                                                    {item.postTypeName}
                                                </Radio.Button>
                                            ))}
                                    </Radio.Group>
                                </Col>
                            </Row>
                            <div className={styles.pie_wrap}>
                                <div className={styles.post_summary}>职位类型总计: {getSummary()}</div>
                                <PortrayalBar data={barData} />
                            </div>
                        </Col>
                    </Row>
                )}
            </Spin>
        </Card>
    );
};

export default Portrayal;
